<template>
    <el-dialog
        v-model="appLogDialogDialogFlag"
        title="容器日志"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
        :center="true"
    >
        <el-table
            :data="appLogFileList"
            style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
            row-key="logFileName"
            border
            :stripe="true"
            :show-overflow-tooltip="true"
            max-height="70vh"
            :loading="true"
            v-loading="searchLoading"
        >
            <el-table-column prop="logFileName" label="文件名称" />
            <el-table-column prop="fileUpdateTime" label="修改时间" />
            <el-table-column prop="fileSize" align="center" label="文件大小" />
            <el-table-column align="center">
                <template #header>
                    <span>操 作</span>
                </template>
                <template #default="scope">
                    <el-button type="primary" plain size="small" @click="downLoadAppLog(scope.$index, scope.row)" :loading="scope.row.downLoading">下 载</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="cancelDialog()">关 闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>

import {containerAppLogDownLoad} from "@/request/container";

export default {
    name: "ContainerAppLogDialog",
    data() {
        return {
            appLogFileList: [],
            appLogDialogDialogFlag: false,
            containerId: "",
            searchLoading: false
        }
    },
    methods: {
        downLoadAppLog(index, row) {
            row.downLoading = true;
            row.containerId = this.containerId;
            containerAppLogDownLoad(row).then(res => {
                row.downLoading = false;
            }).catch(res => {
                row.downLoading = false;
            });
        },
        cancelDialog() {
            this.appLogDialogDialogFlag = false;
        }
    }
}
</script>

<style scoped lang="less">
.appLogListContainer {

}
</style>